import React from 'react';
import Goods from './goods';
import { ShopingCartStyle, FlexRowBox } from './style';
import { connect } from 'umi';
import type { ShopingCartState, ShopingCartGoods } from '@/models/shopingCart';
import type { HandleGoods } from './GoodsList';

export type ShopingCartProps = {
  addGoods: HandleGoods;
  reduceGoods: HandleGoods;
  shopingCartGoodslist: ShopingCartState;
  setShopingCartSwitch?: any;
};

const GoodsList: React.FC<ShopingCartProps> = (props) => {
  return (
    <ShopingCartStyle>
      <FlexRowBox className="top">
        <span className="title">已选商品</span>
        <img
          src="https://res.lexiangpingou.cn/images/vip/chacha.png"
          alt=""
          className="close"
          onClick={() => {
            props?.setShopingCartSwitch(false);
          }}
        />
      </FlexRowBox>
      {props.shopingCartGoodslist?.goodsList?.length >= 0 &&
        props.shopingCartGoodslist?.goodsList.map((item, key) => {
          return (
            <ul className="goods-list" key={item.gid}>
              <Goods
                gid={item.gid}
                gimg={item.gimg}
                name={item.name}
                gprice={item.price}
                num={item.num}
                plusGoods={props.addGoods}
                reduceGoods={props.reduceGoods}
                rawGoods={item}
              />
            </ul>
          );
        })}
    </ShopingCartStyle>
  );
};

export default connect(
  ({ shopingcart }: { shopingcart: ShopingCartState }) => {
    return {
      shopingCartGoodslist: shopingcart,
    };
  },
  (dispatch) => {
    return {
      addGoods: (goods: ShopingCartGoods) => {
        console.log('addGoods:', goods);
        dispatch({
          type: 'shopingcart/plus',
          data: goods,
        });
      },
      reduceGoods: (goods: ShopingCartGoods) => {
        dispatch({
          type: 'shopingcart/reduce',
          data: goods,
        });
      },
    };
  },
)(GoodsList);
